<template>
    <div class="left">
        <div>车辆管理</div>
        <ul>
            <li @click="toRouter('/carlist')">车辆列表</li>
            <li @click="toRouter('/chuche')">出车记录</li>
            <li @click="toRouter('/jiayou')">加油记录</li>
            <li @click="toRouter('/weixiu')">维修记录</li>
            <li @click="toRouter('/weizhang')">违章记录</li>
            <li @click="toRouter('/qita')">其他记录</li>
            <li @click="toRouter('/nianjian')">年检记录</li>
            <li @click="toRouter('/siji')">司机记录</li>
        </ul>
    </div>
    <div class="right">
        <div class="wel">
            <div class="top">
                <div class="car">
                    <div class="cartop">防撞车<span>实时</span></div>
                    <div class="carbottom">
                        <div class="content">
                            <span class="num">10</span><br/>
                            <span class="wen">共计车辆</span>
                            <div     class="shouru">
                                <p>总收入<span>88888</span>元</p>
                                <p>已收<span>66666</span>元</p>
                                <p>未收<span>22222</span>元</p>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="car">
                    <div class="cartop">高空车<span>实时</span></div>
                    <div class="carbottom">
                        <div class="content">
                            <span class="num">10</span><br/>
                            <span class="wen">共计车辆</span>
                            <div     class="shouru">
                                <p>总收入<span>88888</span>元</p>
                                <p>已收<span>66666</span>元</p>
                                <p>未收<span>22222</span>元</p>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="car">
                    <div class="cartop">作业车<span>实时</span></div>
                    <div class="carbottom">
                        <div class="content">
                            <span class="num">10</span><br/>
                            <span class="wen">共计车辆</span>
                            <div     class="shouru">
                                <p>总收入<span>88888</span>元</p>
                                <p>已收<span>66666</span>元</p>
                                <p>未收<span>22222</span>元</p>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="car">
                    <div class="cartop">检测车<span>实时</span></div>
                    <div class="carbottom">
                        <div class="content">
                            <span class="num">10</span><br/>
                            <span class="wen">共计车辆</span>
                            <div     class="shouru">
                                <p>总收入<span>88888</span>元</p>
                                <p>已收<span>66666</span>元</p>
                                <p>未收<span>22222</span>元</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="bottom"></div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const toRouter = (path) => {
    router.push(path)
}
</script>

<style lang="scss" scoped>
 .left{
        background-color: #313131;
        height: 100%;
        width: 130px;
        color: #ffffff;
        text-align: center;
        div{
            padding: 20px 0;
            border-bottom: 1px solid #c2c2c2;
        }
        ul{
            li{
                padding: 5px 0;
                &:hover{
                    cursor: pointer;

                }
            }
        }
    }
    .right{
        background-color: #efefef;
        height: 100%;
        width: calc(100% - 130px);
        .wel{
            margin: 20px;
            // background-color: #fff;
            width: calc(100% - 40px);
            height: calc(100% - 40px);
            box-sizing: border-box;
            .top{
                height: 150px;
                width: 100%;
                // background-color: pink;
                display: flex;
                justify-content: space-between;
                .car{
                    background-color: #fff;
                    // flex-direction: row;
                    flex:0.24;
                    .cartop{
                        height: 42px;
                        line-height: 42px;
                        color: #333;
                        font-size: 16px;
                        padding: 0 15px;
                        border-bottom: 1px solid #f6f6f6;
                        position: relative;
                        span{
                            position: absolute;
                            top: 50%;
                            right: 15px;
                            transform: translateY(-50%);
                            background-color: #01AAED;
                            color: #fff;
                            font-size: 13px;
                            line-height: 13px;
                            padding:  3px 5px;
                            border-radius: 3px;
                        }
                    }
                    
                }
            }
            .carbottom{
                padding: 15px;

                .content{
                    color: #666;
                    font-size: 14px;
                    position: relative;
                    .num{
                        font-size: 32px;
                        color: #666;
                        line-height: 50px;

                    }
                    .wen{
                        line-height: 20px;
                    }

                .shouru{
                    position: absolute;
                    right: 0px;
                    bottom: 0px;
                    text-align: right;
                    font-size: 14px;
                    color: #666;
                }
                }
            }
            .bottom{
                width: 100%;
                height: calc(100% - 165px);
                margin-top: 15px;
                background-color: rgb(255, 255, 255);
            }
        }
    }
</style>